<template>
  <div class="hot-articles-container">
    <h2 class="section-title">最热文章</h2>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalArticles"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <div class="hot-article-cards">
      <div
        class="hot-article-card"
        v-for="(article, index) in hotArticles"
        :key="article.id"
      >
        <div class="article-image-container">
          <img :src="article.coverImage" alt="文章封面" />
        </div>
        <div class="article-info">
          <h4 class="article-title">{{ article.title }}</h4>
          <p class="article-introduction">{{ article.introduction }}</p>
          <p>作者：<router-link :to="`/user/${article.userId}`">{{ article.authorNickname }}</router-link></p>
          <p>阅读量：{{ article.viewCount }}</p>
          <p>时间归档：{{ article.archiveType }}</p>
        </div>
        <div class="article-rank">{{ index + 1 }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotArticles: [],
      currentPage: 1,
      pageSize: 10,
      totalArticles: 0
    };
  },
  mounted() {
    this.getHotArticles();
  },
  methods: {
    getHotArticles() {
      this.$axios.get('/article/hotArticles', {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(response => {
        if (response.data.code === 200) {
          this.hotArticles = response.data.data;
          this.totalArticles = response.data.total;
        }
      });
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getHotArticles();
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.getHotArticles();
    }
  }
};
</script>

<style scoped>
.hot-articles-container {
  padding: 30px;
}
.hot-article-cards {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.hot-article-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s;
  transform: scale(var(--scale, 1));
  display: flex;
  align-items: center;
}
.hot-article-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  transform: scale(var(--scale, 1.03));
}
.article-image-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.article-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-info {
  flex: 1;
  padding: 20px;
}
.article-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}
.article-introduction {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
}
.article-rank {
  font-size: 24px;
  font-weight: bold;
  color: #ffb76b;
  padding: 20px;
}
</style>